<template>
    <view class="nova-column">
        <!--        <text class="li-section">{{ help.help_problem }}</text>
        <text class="ans">{{ help.help_answer }}</text> -->

        <nova-pref class="pref" :title="item.help_problem" v-for="(item, index) in helps" :key="index" @click.native="goAnswer(item)" :arrow="true"></nova-pref>
        <uni-popup type="center" ref="popup" class="popup">
            <view class="content nova-column nova-flex-center">
                <text class="title">{{ help.help_problem }}</text>
                <scroll-view
                    scroll-y="true"
                    style="height: 750rpx;
            margin-top: 40rpx;"
                >
                    <text class="desc">{{ help.help_answer }}</text>
                </scroll-view>
                <image class="close" src="../../static/img/dialog-close.png" @click.stop="hidePopup"></image>
            </view>
        </uni-popup>
    </view>
</template>

<script>
import novaPref from '../../components/nova/pref.vue';
import uniPopup from '../../components/uni-popup/uni-popup.vue';
export default {
    components: {
        novaPref,
        uniPopup
    },
    data() {
        return {
            id: 0,
            helps: [],
            help: {}
        };
    },
    methods: {
        async loadData() {
            let res = await this.$request.post({
                url: '/help/problemAnswer',
                data: {
                    help_type_id: this.id
                }
            });
            this.helps = res || [];
        },
        goAnswer(item) {
            this.help = item;
            this.$refs.popup.open();
        },
        hidePopup() {
            this.$refs.popup.close();
        }
    },
    onLoad(options) {
        this.id = options.id;
        // #ifdef H5
        if (!this.id) {
            this.id = 2;
        }
        // #endif
        this.loadData();
    }
};
</script>

<style lang="scss">
.ans {
    padding: 34rpx;
}
.popup {
    .content {
        position: relative;
        width: 680rpx;
        margin: 34rpx;
        border-radius: 32rpx;
        background-color: white;
        padding: 40rpx 20rpx 30rpx 34rpx;
        .close {
            width: 68rpx;
            height: 68rpx;
            position: absolute;
            bottom: -100rpx;
            left: 294rpx;
            //display: none;
        }

        .title {
            font-size: 36rpx;
            color: #333;
        }
        .desc {
            font-size: 28rpx;
            color: #999;
            line-height: 40rpx;
        }
    }
}
.pref {
    position: relative;
    &:after {
        @include divider();
    }
}
</style>
